<template>
  <div class="activity-form">
    <h3>添加新活动</h3>
    <form @submit.prevent="handleSubmit">
      <div class="form-group">
        <label>标题:</label>
        <input v-model="newActivity.title" required>
      </div>
      <div class="form-group">
        <label>描述:</label>
        <textarea v-model="newActivity.description" required></textarea>
      </div>
      <div class="form-group">
        <label>日期:</label>
        <input type="date" v-model="newActivity.date" required>
      </div>
      <div class="form-group">
        <label>地点:</label>
        <input v-model="newActivity.location" required>
      </div>
      <button type="submit">添加活动</button>
    </form>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  emits: ['add-activity'],
  setup(props, { emit }) {
    const newActivity = ref({
      title: '',
      description: '',
      date: '',
      location: ''
    })

    const handleSubmit = () => {
      emit('add-activity', { ...newActivity.value })
      newActivity.value = { title: '', description: '', date: '', location: '' }
    }

    return { newActivity, handleSubmit }
  }
}
</script>